<template>
    <div class="ai-response-detail-container">
        <div class="page-header">
            <div class="header-left">
                <el-button @click="goBack">返回</el-button>
                <h2>AI回复内容详情</h2>
            </div>
        </div>

        <el-card class="response-info" v-if="response" v-loading="loading">
            <div class="info-header">
                <div class="info-item">
                    <span class="label">ID：</span>
                    <span>{{ response.id }}</span>
                </div>
                <div class="info-item">
                    <span class="label">用户ID：</span>
                    <span>{{ response.userId || '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="label">会话ID：</span>
                    <span>{{ response.conversationId || '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="label">消息ID：</span>
                    <span>{{ response.messageId || '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="label">模型名称：</span>
                    <span>{{ response.modelName }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Token数量：</span>
                    <span>{{ response.tokensUsed }}</span>
                </div>
                <div class="info-item">
                    <span class="label">创建时间：</span>
                    <span>{{ formatDateTime(response.createdAt) }}</span>
                </div>
            </div>

            <div class="content-section">
                <h3>用户提问</h3>
                <div class="content-box prompt">
                    <pre>{{ response.prompt }}</pre>
                </div>
            </div>

            <div class="content-section">
                <h3>AI回复</h3>
                <div class="content-box response">
                    <pre>{{ response.response }}</pre>
                </div>
            </div>

            <div class="actions">
                <el-button type="danger" @click="deleteResponse">删除</el-button>
                <el-button type="primary" v-if="response.conversationId" @click="viewConversation">查看会话</el-button>
            </div>
        </el-card>

        <div v-if="!response && !loading" class="no-data">
            <el-empty description="未找到AI回复内容" />
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import chatApi from '@/api/chat.js'

export default {
    name: 'AiResponseDetail',
    data() {
        return {
            responseId: null,
            response: null,
            loading: false
        }
    },
    created() {
        this.responseId = this.$route.params.id
        if (!this.responseId) {
            ElMessage.error('AI回复内容ID不能为空')
            this.goBack()
            return
        }
        this.fetchData()
    },
    methods: {
        goBack() {
            this.$router.push({ name: 'AiResponseList' })
        },
        fetchData() {
            this.loading = true
            chatApi.getAiResponse(this.responseId)
                .then(response => {
                    if (response.code === 200) {
                        this.response = response.data
                    } else {
                        ElMessage.error(response.message || '获取AI回复内容详情失败')
                        this.goBack()
                    }
                })
                .catch(error => {
                    console.error('获取AI回复内容详情失败:', error)
                    ElMessage.error('获取AI回复内容详情失败')
                    this.goBack()
                })
                .finally(() => {
                    this.loading = false
                })
        },
        formatDateTime(dateTime) {
            if (!dateTime) return '-'
            const date = new Date(dateTime)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
        },
        deleteResponse() {
            ElMessageBox.confirm('确认删除该AI回复内容吗？删除后将无法恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                chatApi.deleteAiResponse(this.responseId)
                    .then(response => {
                        if (response.code === 200) {
                            ElMessage.success('删除成功')
                            this.goBack()
                        } else {
                            ElMessage.error(response.message || '删除失败')
                        }
                    })
                    .catch(error => {
                        console.error('删除AI回复内容失败:', error)
                        ElMessage.error('删除AI回复内容失败')
                    })
            }).catch(() => {
                // 取消删除操作
            })
        },
        viewConversation() {
            if (this.response && this.response.conversationId) {
                this.$router.push({
                    name: 'ConversationDetail',
                    params: { id: this.response.conversationId }
                })
            }
        }
    }
}
</script>

<style scoped>
.ai-response-detail-container {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left h2 {
    margin-left: 15px;
    margin-bottom: 0;
}

.response-info {
    margin-bottom: 20px;
}

.info-header {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.info-item {
    margin-right: 30px;
    margin-bottom: 10px;
}

.label {
    font-weight: bold;
    color: #606266;
}

.content-section {
    margin-bottom: 20px;
}

.content-section h3 {
    margin-bottom: 10px;
    color: #303133;
}

.content-box {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.content-box pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

.prompt {
    background-color: #f0f9eb;
    border-left: 4px solid #67c23a;
}

.response {
    background-color: #f0f7ff;
    border-left: 4px solid #409eff;
}

.actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.actions button {
    margin-left: 10px;
}

.no-data {
    margin-top: 50px;
}
</style> 